<template>
  <div class="reply-box">
    <div class="user-avatar-box">
      <el-avatar class="user-profile-photo" :size="40" :src="comment.avatar_url">
        <img :src="defaultImg" alt="默认显示头像">
      </el-avatar>
    </div>
    <div class="comment-box">
      <h4>
        <span class="span-user" @click="goPage('/user/'+ comment.username)">{{comment.username}}</span>
        <span v-show="comment.reply_to">
          @ <span class="span-user" @click="goPage('/user/'+ comment.reply_to)">{{comment.reply_to}}</span>
        </span>
      </h4>
      <p class="comment-content" v-html="comment.content"></p>
      <p class="comment-info">
        <span class="reply-time mr-20">{{comment.create_date}}</span>
        <span class="up-box mr-20" @click="handleArticleCommentUp">
          <i></i>
          {{comment.up_count}}
        </span>
        <el-button type="text" @click="handleTriggerEditor">回复</el-button>
        <comment-editor class="editor-reply" :inline="true" v-show="editorShow" @submit="handleReply"></comment-editor>
      </p>
      <template v-show="comment.inner_comments.length > 0">
        <ReplyBox v-for="(innerComment, index) in comment.inner_comments" :key="index" @add_comment="addComment($event)"
                  :comment="innerComment" :articleID="articleID" :parentID="comment.id"></ReplyBox>
      </template>
      <el-pagination
          v-show="paginationShow"
          :hide-on-single-page="true"
          @current-change="handleCurrentChange"
          :current-page.sync="currentChildCommentPage"
          :page-size="childCommentPageSize"
          prev-text="上一页"
          next-text="下一页"
          layout="total, prev, pager, next"
          :total="childCommentTotal">
      </el-pagination>
      <p v-show="comment.reply_count && comment.reply_count > 3" style="font-size: 14px;">
        共
        <span>{{comment.reply_count}}</span>
        条评论
        <el-button type="text" @click="handleListChildComment">点击查看</el-button>
      </p>
<!--      <h1 v-else>111111</h1>-->
    </div>
  </div>
</template>

<script>
import {articleCommentUp, commentArticle, listArticleChildComment} from "@/api/apis";

export default {
  name: "ReplyBox",
  props: ['comment', 'articleID', 'parentID'],
  data(){
    return {
      editorShow: false,
      paginationShow: false,
      currentChildCommentPage: 1,
      childCommentPageSize: 5,    // 二级评论页数固定5条
      childCommentTotal: 0,
      defaultImg: 'https://avatar.csdnimg.cn/3/6/5/1_qq_42478566.jpg',
    }
  },
  mounted() {
    // setTimeout(() => {
    //   console.log(this.comment.inner_comments.length)
    // }, 1000)
  },
  methods:{
    handleTriggerEditor(){
      this.editorShow = !this.editorShow
    },
    handleReply(content){
      let params = new URLSearchParams()
      params.append('article_id', this.articleID)
      params.append('content', content)
      params.append('is_child', true)
      if (this.parentID) {
        params.append('parent_id_id', this.parentID)
      }
      params.append('reply_to_id', this.comment.user_id)
      commentArticle(params).then(response => {
        this.$message.success('回复成功')
        console.log(response.data)
        // 无法清除输入框内的文字
        document.querySelector(".editor-reply .content").innerText=''
        this.editorShow = false
        this.$emit('add_comment', response.data)
        // 刷新评论页面
      }).catch(err => {
        console.log(err)
        this.$message.error('评论失败')
      })
    },
    addComment(data){
      // 新回复的二级评论添加到行首 不删新页面
      this.comment.inner_comments.unshift(data)
      this.comment.reply_count += 1
      // 重新调取评论接口 展开的评论会折叠
      // this.$emit('add_comment')
      // 新回复的二级评论添加到行尾 不删新页面
      // this.comment.inner_comments.push(data)
    },
    goPage(url){
      this.$router.push({path:url})
    },
    handleArticleCommentUp(){
      articleCommentUp(this.comment.id).then(response => {
        this.$message.success('点赞成功')
        this.comment.up_count += 1
      }).catch(err => {
        this.$message.error('点赞失败')
      })
    },
    handleListChildComment(page=null){
      let params = new URLSearchParams()
      params.append('article_id', this.articleID)
      params.append('parent', this.parentID)
      if (page){
        params.append('page', this.currentChildCommentPage)
      }
      params.append('size', this.childCommentPageSize)
      listArticleChildComment(params).then(response => {
        this.comment.inner_comments = response.results.data
        this.comment.reply_count = 0
        this.paginationShow = true
        this.childCommentTotal = response.count
      }).catch(err => {
        console.log(err)
        this.$message.error('获取子评论失败')
      })
    },
    handleSizeChange(size){
      this.currentChildCommentPage = size
      if (this.childCommentPageSize > this.childCommentTotal){
        this.currentChildCommentPage = 1
      }
      this.handleListChildComment()
    },
    handleCurrentChange(page){
      this.currentChildCommentPage = page
      this.handleListChildComment(true)
    },
  },
}
</script>

<style scoped>
  .reply-box{
    display: flex;
  }
  .comment-box{
    word-wrap: break-word;
    word-break: break-all;
    margin-left: 20px;
    width: 100%;
    /*border-top: 1px solid #e5e9ef;*/
  }
  .up-box{
    cursor: pointer;
  }
  .up-box i{
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/zan.0da89524.svg) no-repeat center;
    vertical-align: text-top;
    margin-top: 4px;
    margin-right: 5px;
  }
  .up-box:hover{
    color: #2fb2de;
  }
  .up-box:hover i{
    background-image: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/zan-a-hover.7aa2757b.svg);
  }
  .mr-20{
    margin-right: 20px;
  }
  .span-user:hover{
    color: #ee3f4d;
    cursor: pointer;
  }
</style>
